<template>
    <div class="FurnaceSlag" :style="popupStyle">
        <div class="title">{{ state.dataName }}</div>
        <div class="content">
            <div class="container">
                <div class="wave"></div>
            </div>
            <div class="num">27m</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataTool } from 'echarts';


const props = defineProps({
    top: {
        type: String,
        default: '0px'
    },
    left: {
        type: String,
        default: '0px'
    },
    data: {
        type: Object,
        default: {}
    }
})
let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})
let state = reactive({
    dataList: [
    ] as any,
    dataName: '高水位池A（0.4mpa）',
    dataDetail: [
        { t1: '第1支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第2支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第3支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第4支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第5支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第6支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第7支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
        { t1: '第8支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s', t6: '4' },
    ]
})
// state.dataList = props.data.dataList
// state.dataName = props.data.dataName
console.log('popupStyle', popupStyle);

</script>

<style lang="scss" scoped>
.FurnaceSlag {
    width: vh(317);
    height: vh(134);
    z-index: 999;
    .title {
        width: vh(154);
        height: vh(27);
        padding-left: vh(8);
        background: linear-gradient(90deg, #00B1E1 0%, rgba(0,177,225,0) 100%);
        // opacity: 0.5;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        color: #FFFFFF;
        line-height: vh(27);
    }
    .content {
        display: flex;
        flex-direction: column-reverse;
        width: vh(317);
        height: vh(107);
        display: flex;
        background: rgba(0,25,35,0.8);
        border: vh(1) solid #00B1E1;
        overflow: hidden;
        .num {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(16);
            color: #FEFFFF;
            text-align: center;
            z-index: 998;
        }
        .container {

            width: vh(317);
            height: vh(65);

            .wave {
                position: relative;
                width: vh(317);
                height: vh(65);
                background-color: rgba(0, 177, 225, 0.4);
                &::before,

                &::after {
                    content: "";
                    position: absolute;
                    width: vh(500);
                    height: vh(500);
                    top: vh(-90);
                    left: 50%;
                    background-color: rgba(0, 25, 35, 0.8);
                    border-radius: 45%;
                    transform: translate(-50%, -70%) rotate(0);
                    animation: rotate 6s linear infinite;
                    z-index: 10;
                }

                &::after {
                    border-radius: 47%;
                    background-color: rgba(0, 25, 35, 0.8);
                    transform: translate(-50%, -70%) rotate(0);
                    animation: rotate 10s linear -5s infinite;
                    z-index: 20;
                }
            }
        }
    }


    @keyframes rotate {
        50% {
            transform: translate(-50%, -75%) rotate(180deg);
        }

        100% {
            transform: translate(-50%, -70%) rotate(360deg);
        }

    }
}
</style>